<template>
  <el-table :data="tableData" border style="width: 1000px">
    <el-table-column prop="id" label="学号" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="dorm" label="宿舍" width="180" />
    <el-table-column prop="grade" label="成绩" width="180">
      <template #default="scope">
        <div v-if="scope.row.grade < 60">挂科</div>
        <div v-if="scope.row.grade >= 60 && scope.row.grade < 80">及格</div>
        <div v-if="scope.row.grade >= 80 && scope.row.grade < 90">良好</div>
        <div v-if="scope.row.grade > 90 && scope.row.grade <= 100">优秀</div>
      </template>
    </el-table-column>
    <el-table-column label="操作" min-width="300">
      <template #default="scope">
        <el-button @click.prevent="getDetail(scope.row)"> 查看 </el-button>
        <el-button type="primary" @click.prevent="update(scope.row)">
          修改
        </el-button>
        <el-button type="danger" @click.prevent="del(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
    v-model="flag"
    :title="title"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      style="max-width: 600px"
      :model="form"
      ref="ruleFormRef"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="名字" prop="name">
        <el-input v-model="form.name" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="宿舍名" prop="dorm">
        <el-select v-model="form.dorm" :disabled="disabled">
          <el-option label="一善书院" value="一善书院" />
          <el-option label="双馨书院" value="双馨书院" />
          <el-option label="三创书院" value="三创书院" />
          <el-option label="四实书院" value="四实书院" />
          <el-option label="八方书院" value="八方书院" />
          <el-option label="拾德书院" value="拾德书院" />
        </el-select>
      </el-form-item>
      <el-form-item label="grade" prop="grade">
        <el-input v-model.number="form.grade" :disabled="disabled" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button @click="resetForm()">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
const flag = ref(false);
const title = ref("");
const disabled = ref(false);
const ruleFormRef = ref(null);
const tableData = ref([
  {
    id: "2005001",
    name: "张三",
    dorm: "一善书院",
    grade: 60,
  },
  {
    id: "2005002",
    name: "李四",
    dorm: "双馨书院",
    grade: 65,
  },
  {
    id: "2005003",
    name: "王五",
    dorm: "三创书院",
    grade: 60,
  },
  {
    id: "2005004",
    name: "周六",
    dorm: "四实书院",
    grade: 39,
  },
  {
    id: "2005005",
    name: "郑七",
    dorm: "八方书院",
    grade: 50,
  },
  {
    id: "2005006",
    name: "王八",
    dorm: "拾德书院",
    grade: 65,
  },
]);
const form = ref({
  id: "",
  name: "",
  dorm: "",
  grade: 0,
});
const validateNumber = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入数值")); // 如果为空，提示输入
  }
  if (isNaN(value)) {
    return callback(new Error("请输入数字")); // 如果不是数字，提示输入数字
  }
  if (value < 0 || value > 100) {
    return callback(new Error("请输入 0 到 100 之间的数字")); // 如果不在 1 到 100 之间，提示错误
  }
  callback(); // 校验通过
};
const rules = ref({
  name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
  dorm: [
    {
      required: true,
      message: "宿舍名不能为空",
      trigger: "blur",
    },
  ],
  grade: [
    {
      required: true,
      message: "成绩不能为空",
      trigger: "blur",
    },
    { validator: validateNumber, trigger: "blur" }, // 自定义校验
  ],
});
const getDetail = (data) => {
  flag.value = true;
  title.value = "详情页";
  form.value = data;
  disabled.value = true;
};
const update = (data) => {
  disabled.value = false;
  flag.value = true;
  title.value = "修改页";
  form.value = data;
};
const del = (id) => tableData.value=tableData.value.filter(item=>item.id!==id)
const handleClose = (done) => {
  ElMessageBox.confirm("是否关闭页面")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const submitForm = async (formEl) => {
  if (title.value === "详情页") {
    flag.value = false;
    return;
  }
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      flag.value = false;
    } else {
      console.log();
    }
  });
};
const resetForm = () => {
  flag.value = false;
};
</script>

<style scoped></style>
